<div class="container">
  <form class="form-signin" [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
    <h2 class="form-signin-heading">registration now</h2>
    <div class="login-wrap">
      <p class="register-info-text">enter your personal details below</p>

      <div class="register-input-item">
        <input id="username" type="text" placeholder="Your UserName" class="form-control" formControlName="username" autocomplete="off">
        <div *ngIf="signUpForm.get('username').errors && signUpForm.get('username').touched">
          <span class="register-error-icon">!</span>
          <p class="register-error-message">{{signUpForm.get('username').errors.msg || 'please enter a valid username'}}</p>
        </div>
      </div>

      <div class="register-input-item">
        <input id="email" type="text" placeholder="Your Email Address" class="form-control" formControlName="email"  autocomplete="off" required>
        <div *ngIf="signUpForm.get('email').errors && signUpForm.get('email').touched">
          <span class="register-error-icon">!</span>
          <p class="register-error-message">{{signUpForm.get('email').errors.msg || 'please enter a valid email id'}}</p>
        </div>
      </div>

      <div class="register-input-item">
        <input type="password" id="password"  class="form-control" placeholder="Choose Password" formControlName="password" autocomplete="off" required>
        <div *ngIf="signUpForm.get('password').errors && signUpForm.get('password').touched">
          <span class="register-error-icon">!</span>
          <p class="register-error-message">{{signUpForm.get('password').errors.msg || 'please enter a valid password'}}</p>
        </div>
      </div>

      <!-- <input type="password" id="confirm" placeholder="confirm" class="form-control" formControlName="confirm" autocomplete="off">
      <div *ngIf="signUpForm.get('confirm').errors || signUpForm.hasError('mismathedPasswords') && signUpForm.get('confirm').touched">
        <span style="color: red;">!</span>
        <p>{{signUpForm.get('confirm').errors.msg || signUpForm.hasError('mismathedPasswords') && signUpForm.get('confirm').touched || 'password must match.'}}</p>
      </div> -->
      <button class="btn btn-success">Create Account</button>
      <div style="height:12px;"></div>
      <div class="registration">
        Already Registered.
        <a href="/auth/login" routerLink="/auth/login" class="class">Login</a>
      </div>
    </div>
  </form>
  <hr/>
  <div class="col-md-6 text-center">
    <small>&copy; 2017 Ecool TEK &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; 深圳易酷创新软件有限公司</small>
  </div>
  <div class="col-md-6 text-center">
    <small>Easy Data | Data Cloud</small>
  </div>
</div>
